<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top tabbar-bottom">
			<view class="title text-ellipsis-2">
				{{data.title}}
			</view>

			<view class="base-info">
				<view class="category">
					<view class="cover" v-if="data.category!==undefined">
						<image :src="data.category.cover_100" mode="widthFix"></image>
					</view>
					<view class="title" v-if="data.category!==undefined">
						{{data.category.title}}
					</view>
					
				</view>
				<view class="create-time">
					{{data.create_time_str}}
				</view>
			</view>
			<view class="description">
				<view class="cont text-ellipsis-2">
					{{data.description}}
				</view>
			</view>
			<view class="cover">
				<image :src="data.cover_800" mode="widthFix"></image>
			</view>
			<!--详情块-->
			<view class="detail">
				<view class="content">
					<!-- #ifdef MP-->
					<rich-text :nodes="util.formatRichText(data.content)"></rich-text>
					<!-- #endif -->
					<!-- #ifdef H5-->
					<view v-html="util.formatRichText(data.content)"></view>
					<!-- #endif -->
				</view>
			</view>
			
			<!--评论列表-->
			<view class="comment-section">
				<view class="title">
					评论
				</view>
				<!--列表-->
				<view class="comment-list">
					<view class="item" v-for="(item,index) in commentList" :key="index">
						<view class="user-info">
							<view class="avatar">
								<image :src="item.user_info.avatar" class="image" mode="widthFix"></image>
							</view>
						</view>
						<view class="content">
							<text class="nickname">
								{{item.user_info.nickname}}
							</text>
							<view class="info">
								{{item.content}}
							</view>
						</view>
						<view class="support" @click="commentSupport(item.id,index)">
							<view class="icon">
								<template v-if="item.support_yesno == 1">
									<text class="iconfont active">&#xe61a;</text>
								</template>
								<template v-else>
									<text class="iconfont">&#xe61d;</text>
								</template>
							</view>
							<template v-if="item.support==0">
								<text>赞</text>
							</template>
							<template v-else>
								<text>{{item.support}}</text>
							</template>
						</view>
					</view>
				</view>
				<view class="load-more-body">
					<uni-load-more iconType="circle" :status="commentListLoadStatus" />
				</view>
			</view>
			
			<CopyRight :config="config" />
		</view>
		<template v-if="!loading && config">
			<Comment :data="data" :config="config" @getCommnetList="getCommnetList" />
		</template>
		<!--登录框-->
		<Login ref="login" :config="config" />
	</view>
</template>


<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import CopyRight from '../common/copyRight.vue' //自定义版权
	import Comment from './comment.vue' //底部评论收藏点赞栏
	import Top from '../common/top.vue'
	
	export default {
		
		components: {
			FullscreenLoading,
			CopyRight,
			Comment,
			Top
		},
		data() {
			return {
				loading: true, // 数据是否加载中
				urlParams: {},
				data: {},
				nodes: [],
				detailShow: 'content', //内容区默认显示课程详情 string content:课程详情 list:系列课目录
				commentListLoadStatus: 'more', // more 加载前 loading 加载中 noMore没有更多
				commentListPage: 1,
				commentList: [],
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			await this.$onLaunched;
			this.urlParams = option
			Promise.all([this.getData()]).then(res => {
				// H5端分享设置
				//#ifdef H5
				let url = window.location.href
				
				let shareData = {
					title : this.data.title,
					desc : this.data.description,
					img: this.data.cover_200
				}
				console.log(shareData)
				this.wechat.share(shareData,url)
				//#endif
				this.getCommnetList(1)
			}).then(setH => {
				//加载完成
				this.loading = false
			})
		},
		created() {

		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			/**
			 * 获取课程详情数据
			 */
			getData: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.id = params.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/article'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/article'
						data.m = 'muu_classroom_plugin_article'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								console.log(that.data)
								//设置原生导航栏标题
								uni.setNavigationBarTitle({
								　　title: res.data.data.title
								})
							}
							resolve(res.data)
						}
					})
				})
			},
			/**
			 * 加载评论分页列表
			 */
			getCommnetList: function(page){
				this.commentListLoadStatus = 'loading'
				let that = this
				let params = this.urlParams
				let data = {}
					data.article_id = params.id
					data.page = page
				page = page || 1
				if(page == 1){
					// 清空课程列表
					this.commentList = []
				}
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/article'
					data.m = 'muu_classroom'
					data.action = 'comment_lists'
					//#endif
					//#ifdef H5
					url = 'entry/site/comment'
					data.m = 'muu_classroom_plugin_article'
					data.action = 'lists'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							let list = res.data.data.data
							if(list.length > 0){
								//console.log(list)
								that.commentListLoadStatus = 'more'
								that.commentList = that.commentList.concat(list)
								that.commentListPage = page + 1
							}else{
								that.commentListLoadStatus = 'noMore'
							}
						}
					}
				})
			},
			/**
			 * 评论点赞
			 */
			commentSupport: function(comment_id,index){
				//console.log(comment_id)
				//console.log(this.commentList[index])
				let that = this
				
				let data = {}
					data.action = 'support_comment_edit'
					data.m = 'muu_classroom'
					data.comment_id = comment_id
				this.util.request({
					url : 'entry/wxapp/article',
					data : data,
					method: 'POST',
					success: function (res) {
						if (res.data.code == 200) {
							console.log(res.data)
							if(res.data.data == 1){
								that.commentList[index].support = parseInt(that.commentList[index].support) + 1
								that.commentList[index].support_yesno = 1
							}else{
								that.commentList[index].support = parseInt(that.commentList[index].support) - 1
								that.commentList[index].support_yesno = 0
							}
							
						}else{
							if(res.data.msg == '需要登录'){
								//触发登录框
								that.$refs.login.loginDialog()
							}
						}
					}
				})
			}
			
		},
		onReachBottom() {
			console.log('页面滚动到底部')
			this.getCommnetList(this.commentListPage)
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			// 分享(分销)用户ID
			let userInfo = '';
			if(this.userInfo){
				userInfo = this.userInfo.memberInfo || {}
			}
			console.log(userInfo)
			let url = '/muu_classroom/pages/article/detail?' + 'id=' + this.data.id
			if(userInfo.hasOwnProperty("uid") && userInfo.uid !== undefined){
				url = url + '&promoter_uid=' + userInfo.uid
			}
			console.log(url)
			let share = {
				title : this.data.title,
				path : url,
				desc : this.data.description,
				success : function(res){
					
				},
			}
			
			return share
		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.main-section {
		.title {
			font-size: 44rpx;
			font-weight: 600;
			color: #000;
			padding: 20rpx;
		}
		.description {
			margin: 20rpx;
			padding: 20rpx;
			background-color: #f8f8f8;
			border-top: 3rpx solid #999;
			.cont {
				font-size: 28rpx;
				color: #999;
			}
		}
		.cover {
			position: relative;
			margin: 20rpx;
			image {
				width: 100%;
				display: block;
			}
		}
		.base-info {
			display: flex;
			background-color: #fff;
			margin: 20rpx;
			.category {
				flex: 1;
				display: flex;
				.cover {
					width: 64rpx;
					height: 64rpx;
					margin: 0;
					padding: 0;
					border-radius: 50%;
					overflow: hidden;
				}
				.title {
					font-size: 28rpx;
					line-height: 64rpx;
					margin: 0;
					margin-left: 20rpx;
					padding: 0;
				}
			}
			.create-time {
				flex: 1;
				font-size: 24rpx;
				line-height: 64rpx;
				color: #999;
				text-align: right;
			}
		}
		
		.detail {
			//详情
			.content {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
				
			}
		}
		
		.comment-section {
			padding: 20rpx;
			.title {
				padding: 20rpx 0;
				font-size: 36rpx;
				font-weight: 600;
			}
			.comment-list {
				.item {
					display: flex;
					margin-bottom: 20rpx;
					.user-info {
						width: 92rpx;
						.avatar {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
							overflow: hidden;
							.image {
								display: block;
								width: 100%;
							}
						}
					}
					.content {
						flex: 1;
						.nickname {
							font-size: 24rpx;
							color: #999;
						}
						.info {
							font-size: 24rpx;
							color: #999;
						}
					}
					.support {
						width: 40rpx;
						padding: 16rpx;
						text-align: center;
						font-size: 24rpx;
						.icon {
							.iconfont {
								font-size: 24rpx;
							}
							.iconfont.active {
								color: #f90;
							}
						}
					}
				}
			}
		}
	}
	
</style>
